import React from 'react'
import styles from './index.module.css'
import {withRouter, RouteComponentProps} from 'react-router-dom';
import Nav from '../../../components/nav'
import {connect} from "react-redux";
import request from "../../../utils/request";
import {Toast} from "antd-mobile";
import {Dispatch} from "redux";


const Info: React.FC<{ item: address, onSelectClick: any, onEdit: any }> = ({item, onSelectClick, onEdit}) => {
    return (
        <div className={styles.info}>
            <div style={{
                display: 'flex',
            }}>
                <div className={styles.circle}>郭</div>
                <div onClick={() => {
                    onSelectClick(item);
                }}>
                    <div className={styles.user}>
                        <b>{item.username}</b>
                        <span className={styles.mobile}>{item.userPhone}</span>
                        <span className={styles.iconDefault}>默认</span>
                    </div>
                    <div className={styles.addrText}>{item.addressFull}</div>
                </div>
            </div>
            <div className={styles.editIcon} onClick={() => {
                onEdit(item);
            }}>
                <i className={"iconfont icon-edit-square"}/>
            </div>
        </div>
    );
};

interface Props extends RouteComponentProps {
    dispatch: Dispatch
}

interface address {
    id: number,
    username: string,
    userPhone: string,
    addressFull: string,
}

interface States {
    addressList: address[]
}

class Index extends React.Component<Props, States> {
    state: States = {
        addressList: []
    };
    onEdit = (item: address) => {
        const {history} = this.props;
        let path = {
            pathname: `/mine/addresses/${item.id}`,
            state: {},
        };
        history.push(path);
    };

    componentDidMount() {
        request('/addresses').then((result) => {
            const {addressList} = result.data;
            this.setState({addressList});
        }).catch(() => {
            Toast.fail('请求失败');
        });
    }

    onSelectClick = (addr: address) => {
        const {history, dispatch} = this.props;
        dispatch({
            type: 'selectedAddressSave',
            payload: addr
        });
        history.push('/order/checkout');
    };

    render() {
        const {history} = this.props;
        return (
            <div className={styles.container}>
                <Nav title={"收货地址管理"} onLeftClick={
                    () => {
                        history.goBack()
                    }
                }/>
                {
                    this.state.addressList.map((item, inx) => {
                        return <Info item={item} onEdit={this.onEdit} onSelectClick={this.onSelectClick} key={inx}/>
                    })
                }
                <div className={styles.footer}>
                    <button onClick={() => {
                        history.push('/mine/addresses/0');
                    }}>添加地址
                    </button>
                </div>
            </div>
        );
    }
}

export default connect((state) => ({}), (dispatch) => ({
    dispatch
}))(withRouter(Index))
